<template>
  <view class="pick-truck-main">
    <view class="pick-truck-first">
      <view class="first-head">
        <text style="float: left;font-size: 32rpx;font-weight: 800;">单号：{{data.orderNo}}</text>
        <text style="float: right;font-size: 28rpx;font-weight: 800;">站点：{{data.siteName}}</text>
      </view>
      <view style="padding: 16rpx 24rpx;display: flex;justify-content: space-between;color: white;">
        <view class="first-img img1">
          <view style="height: 205rpx;">
            <image 
              @click="chooseImg(1)"
              mode="aspectFill" 
              style="width: 322rpx;height: 205rpx;"
              :src="data.plateNoPic"></image>
          </view>
          <view style="height: 147rpx;background-color: rgba(37, 40, 49, 1);">
            <view class="first-title">车牌号码</view>
            <view class="first-info">
              <view @click="edit = false">
                <image 
                  style="width: 40rpx;height: 40rpx;margin-top: 8rpx;" 
                  src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recevicecar_1.png"></image>
              </view>
              <view style="margin-left: 16rpx;">
                <input :disabled="edit" style="width: 200rpx;height: 56rpx;" v-model="data.plateNo" placeholder="请填写" />
              </view>
            </view>
          </view>
        </view>
        <view class="first-img img2">
          <view style="height: 205rpx;">
            <image 
              @click="chooseImg(2)"
              mode="aspectFill" 
              style="width: 322rpx;height: 205rpx;"
              :src="data.mileagePic"></image>
          </view>
          <view style="height: 147rpx;background-color: rgba(37, 40, 49, 1);">
            <view class="first-title">进场里程(KM)</view>
            <view class="first-info">
              <view @click="edit = false">
                <image 
                  style="width: 40rpx;height: 40rpx;margin-top: 8rpx;" 
                  src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recevicecar_1.png"></image>
              </view>
              <view style="margin-left: 16rpx;">
                <input :disabled="edit" style="width: 200rpx;height: 56rpx;" v-model="data.mileage" placeholder="请填写"/>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="first-foot">
        <view class="first-foot-info" style="border-bottom: 2rpx solid rgba(220, 220, 220, 0.5);">
          <view>维修类别</view>
          <view @click="addRepairType(true)" class="first-add">
            +  添加
          </view>
          <view style="width: 400rpx;padding-top: 26rpx;">
            <view 
              v-for="(item,index) in data.repairType" 
              class="first-item" 
              :key="index" 
              v-if="index < 2">
              {{item.name}}
            </view>
            <!-- 展示更多按钮 -->
            <view v-if="data.repairType.length > 2" style="float: right;width: 83rpx;height: 52rpx;">
              <image 
                @click="showMore(true)"
                style="width: 83rpx;height: 32rpx;position: relative;top: -20rpx;"
                src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairtype_1.png"></image>
            </view>
          </view>
        </view>
        <view class="first-foot-info">
          <view>结算方式</view>
          <view @click="addRepairType(false)" class="first-add">
            +  添加
          </view>
          <view style="width: 400rpx;padding-top: 26rpx;">
            <view 
              v-for="(item,index) in data.repairPayment" 
              class="first-item"
              :key="index"
              v-if="index < 2">{{item.name}}</view>
          </view>
          <!-- 展示更多按钮 -->
          <view v-if="data.repairPayment.length > 2" style="float: right;width: 83rpx;height: 52rpx;">
            <image 
              @click="showMore(false)"
              style="width: 83rpx;height: 32rpx;position: relative;top: 8rpx;"
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairtype_1.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="pick-truck-second">
      <view class="second-item">
        <view class="second-item-key">进场时间：</view>
        <view class="second-item-value">{{data.createTime}}</view>
      </view>
      <view class="second-item">
        <view class="second-item-key">出场时间：</view>
        <view class="second-item-value">{{data.outTime}}</view>
      </view>
      <view class="second-item">
        <view class="second-item-key" style="letter-spacing: 4px;">报修人：</view>
        <view class="second-item-value">{{data.carPickerName}} {{data.phone}}</view>
      </view>
      <view class="second-item">
        <view class="second-item-key" style="letter-spacing: 4px;">接车人：</view>
        <view class="second-item-value">{{data.carPickerName}} {{data.phone}}</view>
      </view>
    </view>
    <view v-if="data.isMotorVehicle == 1" @click="gotoTruckInfo" class="pick-truck-third">
      <image 
        style="margin-left: 230rpx;width: 32rpx;height: 32rpx;position: relative;top: 7rpx;" 
        src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairtype_2.png"></image>
      <text style="margin-left: 20rpx;">查看车辆档案 >></text>
    </view>
    <view v-else class="pick-truck-third">
      <image 
        style="margin-left: 230rpx;width: 32rpx;height: 32rpx;position: relative;top: 7rpx;" 
        src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/repairtype_3.png"></image>
      <text style="margin-left: 20rpx;color: rgba(170, 170, 170, 1);">查看车辆档案 >></text>
    </view>
    <view style="margin-top: 50rpx;">
      <button 
        @click="submitInfo"
        style="width: 718rpx;line-height: 94rpx;background-color: rgba(250, 140, 22, 1);color: white;">提交</button>
    </view>
    <!-- 展示维修类别或者结算方式 -->
    <uni-popup 
      ref="showInfo" 
      >
      <view class="RepairTypes">
        <view 
          class="repair-type"
          v-for="(item,index) in showInfo"
          :key="index"
          >
          <view
            class="repair-pice-pick"
            @click="pickRepair(item)">
            {{item.name}}
          </view>
        </view>
      </view>
    </uni-popup>
    
    
    <!-- 添加维修类别或结算方式 -->
    <uni-popup ref="addRepairType">
      <view class="RepairTypes">
        <view 
          class="repair-type"
          v-for="(item,index) in addInfo"
          :key="index"
          >
          <view
            v-if="item.isPick"
            class="repair-pice-pick"
            @click="pickRepair(item)">
            {{item.name}}
          </view>
          <view
            v-else
            class="repair-pice"
            @click="pickRepair(item)">
            {{item.name}}
          </view>
        </view>
        <view v-if="isAddRepair" class="btn-add-type" @click="addAllRepair">
          添加维修类别
        </view>
        <view v-else class="btn-add-type" @click="addAllPays">
          添加结算方式
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {getSettlement,updateSettlement,repairType,payment} from '@/api/settlement/settlement'
  import {uploadFile} from '@/api/uploadFile'
  import {BASE_URL,TOKEN} from '@/utils/request'

  export default {
    data() {
      return {
        edit:true,
        data:{},
        repairTypes:[],
        pays:[],
        addInfo:[],
        isAddRepair:true,
        showInfo:[]
      }
    },
    onLoad(option) {
      this.load(option.id);
    },
    methods: {
      load:function(id) {
        var that = this;
        getSettlement({sId:id}).then(response => {
          var _data = response[1].data;
          // console.log(_data)
          if(_data.status == 200) {
            that.data = _data.data;
            that.getRepairType(_data.data.repairType);
            that.getRepairPayment(_data.data.repairPayment);
          }else {
            uni.showToast({
              icon:'error',
              title:'请求错误'
            })
          }
        }).catch(error => {
          console.log(error)
          uni.showToast({
            icon:'error',
            title:'网络错误'
          })
        })
        
      },
      getRepairType:function(pick) {
        var that = this;
        repairType({}).then(response => {
          var _data = response[1].data;
          // console.log(_data)
          if(_data.status == 200) {
            var info = _data.data;
            var index = 0;
            for(let i = 0;i < info.length;i ++) {
              let tmp = info[i];
              if(pick != null && index < pick.length && tmp.id == pick[index].id) {
                tmp.isPick = true;
                index ++;
              }else {
                tmp.isPick = false;
                
              }
            }
            that.repairTypes = info;
            
          }else {
            uni.showToast({
              icon:'error',
              title:'请求错误'
            })
          }
        }).catch(error => {
          // console.log(error)
          uni.showToast({
            icon:'error',
            title:'网络错误'
          })
        })
      },
      getRepairPayment:function(pick) {
        var that = this;
        payment({}).then(response => {
          var _data = response[1].data;
          // console.log(_data)
          if(_data.status == 200) {
            var pay = _data.data;
            let key = 0;
            for(let i = 0;i < pay.length;i ++) {
              let tmp = pay[i];
              if(pick != null && key < pick.length && tmp.id == pick[key].id) {
                tmp.isPick = true;
                key ++;
              }else {
                if((pick == null || pick.length == 0) && (i == 0 || i == 4)) {
                  tmp.isPick = true;
                }else {
                  tmp.isPick = false;
                }
              }
              
            }
            that.pays = pay;
          }
        })
      },
      chooseImg:function(key) {
        var that = this;
        uni.chooseImage({
          sourceType:['camera'],
          count:1,
          success: (res) => {
            that.getImgPath(key,res.tempFilePaths[0]);
          }
        })
      },
      getImgPath:function(key,url) {
        var that = this;
        uni.uploadFile({
            url: BASE_URL + '/file/fileUpload',
            filePath: url,
            name: 'file',
            header:{
              token:TOKEN
            },
            //fileInfo:{type：，duraction：}
            //type：4、图片   1、语音   
            //duraction：时长
            formData: {
              type:4,
              duraction:''
            },
            success: (res) => {
              var _data = JSON.parse(res.data);
              if(_data.status == 200) {
                var info = _data.data;
                if(key == 1) {
                  that.data.plateNoPic = info.model;
                }else {
                  that.data.mileagePic = info.model;
                }
                
              }else {
                uni.showToast({
                  title:'上传失败',
                  icon:'error',
                  duration:1500
                })
              }
            },
            fail:(error) => {
              console.log(error)
            }
        });
      },
      submitInfo:function() {
        var info = this.data;
        var data = {
          actualUser: info.carInfo.actualUser,
          carInfoId: info.carInfo.id,
          id: info.id,
          mileage: info.mileage,
          mileagePic: info.mileagePic,
          orderStatus: info.orderStatus,
          outgoingNo: info.outgoingNo,
          plateNo: info.plateNo,
          plateNoPic: info.plateNoPic,
          repairPayment: info.repairPayment,
          repairType: info.repairType
        };
        console.log(data)
        updateSettlement(data).then(response => {
          var _data = response[1].data;
          console.log(_data)
          if(_data.status == 200) {
            uni.showToast({
              title:'保存成功'
            })
          }else {
            uni.showToast({
              icon:'error',
              title:'保存失败'
            })
          }
        }).catch(error => {
          
          uni.showToast({
            icon:'error',
            title:'网络错误'
          })
        })
      },
      addRepairType:function(f) {
        this.isAddRepair = f;
        if(f) {
          this.addInfo = this.repairTypes;
        }else {
          this.addInfo = this.pays;
        }
        
        this.$refs.addRepairType.open('center');
      },
      pickRepair:function(repair) {
        var pays = this.pays;
        var type = repair.type;
        var isAddRepair = this.isAddRepair;
        if(!isAddRepair) {
          for(let i = 0;i < pays.length;i ++) {
            let tmp = pays[i]
            if(tmp.type == type) {
              tmp.isPick = false;
            }
          }
          repair.isPick = true;
        }else {
          repair.isPick = !repair.isPick;
        }
        
      },
      addAllRepair:function() {
        var that = this;
        var data = that.repairTypes;
        var addInfo = [];
        for(let i = 0;i < data.length;i ++) {
          let tmp = data[i];
          if(tmp.isPick) {
            addInfo.push(tmp);
          }
        }
        that.data.repairType = addInfo;
        that.$refs.addRepairType.close();
      },
      addAllPays:function() {
        var that = this;
        var data = that.pays;
        var addInfo = [];
        var cnt = 0;
        for(let i = 0;i < data.length;i ++) {
          let tmp = data[i];
          if(tmp.isPick) {
            addInfo.push(tmp);
          }
        }
        that.data.repairPayment = addInfo;
        that.$refs.addRepairType.close();
      },
      showMore:function(flag) {
        var data = this.data;
        if(flag) {
          this.showInfo = data.repairType;
        }else {
          this.showInfo = data.repairPayment;
        }
        this.$refs.showInfo.open('center');
      },
      gotoTruckInfo:function() {
        var id = this.data.carInfo.id;
        uni.navigateTo({
          url:'/pages/truck/truck/truck_info?id=' + id
        })
      }
      
      
    }
  }
</script>

<style lang="scss" scoped>
  .pick-truck-main {
    
    padding: 0;
    margin: 0;
    height: 100%;
    padding: 16rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    .pick-truck-first {
      border-radius: 20rpx;
      height: 705rpx;
      overflow: hidden;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
      .first-head {
        height: 108rpx;
        border-radius: 16rpx 16rpx 0 0;
        color: rgba(51, 51, 51, 1);
        background-color: rgba(246, 247, 248, 1);
        padding: 0 18rpx 0 24rpx;
        line-height: 108rpx;
      }
      .first-foot {
        padding: 10rpx 24rpx 0 24rpx;
        color: rgba(51, 51, 51, 1);
        font-size: 28rpx;
        line-height: 104rpx;
        .first-foot-info {
          display: flex;
          white-space: nowrap;
          .first-add {
            border: 2rpx dashed rgba(170, 170, 170, 1);
            border-radius: 8rpx;
            width: 145rpx;
            min-width: 145rpx;
            height: 52rpx;
            line-height: 52rpx;
            color: rgba(170, 170, 170, 1);
            text-align: center;
            margin: 26rpx 0 0 20rpx;
            font-size: 24rpx;
          }
          .first-item {
            border:2rpx solid rgba(250, 140, 22, 1);
            background-color: rgba(250, 140, 22, 0.1);
            color: rgba(250, 140, 22, 1);
            font-size: 24rpx;
            border-radius: 8rpx;
            float: left;
            margin-left: 12rpx;
            text-align: center;
            width: 128rpx;
            height: 52rpx;
            line-height: 52rpx;
          }
        }
      }
      .first-img {
        height: 350rpx;
        width: 322rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 16rpx;
        overflow: hidden;
        .first-title {
          text-align: center;
          padding: 18rpx 0 10rpx 0;
          line-height: 40rpx;
        }
        .first-info {
          display: flex;
          padding-left: 40rpx;
          line-height: 56rpx;
          font-size: 40rpx;
        }
      }
      .img1 {
        background-image: url('https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recevicecar_2.png');
      }
      .img2 {
        background-image: url('https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/recevicecar_3.png');
      }
    }
    .pick-truck-second {
      height: 288rpx;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 16rpx;
      margin-top: 16rpx;
      padding: 18rpx 0 0 24rpx;
      .second-item {
        margin-top: 24rpx;
        line-height: 30rpx;
        height: 40rpx;
        display: flex;
        .second-item-key {
          color: rgba(51, 51, 51, 0.6);
          font-size: 24rpx;
        }
        .second-item-value {
          color: rgba(51, 51, 51, 0.8);
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
    }
    .pick-truck-third {
      height: 80rpx;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      line-height: 80rpx;
      color: rgba(250, 140, 22, 1);
      border-radius: 16rpx;
      margin-top: 16rpx;
    }
    .RepairTypes {
      font-size: 24rpx;
      
      background-color: white;
      width: 648rpx;
      padding: 0 0 32rpx 30rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5), 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.5);
      .repair-type {
        width: 128rpx;
        height: 52rpx;
        display: inline-block;
        margin: 40rpx 32rpx 0 0;
        line-height: 52rpx;
        .repair-pice {
          text-align: center;
          border-radius: 8rpx;
          border: 2rpx solid rgba(153, 153, 153, 1);
          background-color: rgba(242, 243, 244, 1);
          color: rgba(153, 153, 153, 1);
        }
        .repair-pice-pick {
          text-align: center;
          border-radius: 8rpx;
          border: 2rpx solid rgba(250, 140, 22, 1);
          background-color: rgba(250, 140, 22, 0.1);
          color: rgba(250, 140, 22, 1);
        }
        
      }
      .btn-add-type {
        background-color: rgba(250, 140, 22, 1);
        color: white;
        width: 580rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 16rpx;
        margin: 38rpx 0 0 20rpx;
        font-size: 36rpx;
      }
    }
  }
  
</style>